<template>
  <div>
  <el-popover placement="bottom" width="350" trigger="click" v-model="visable">

    <el-tabs v-model="activeName" :value="activeName">
      <el-tab-pane :label="messageName" name="first">
        <el-scrollbar style="height:300px">
          <el-card>
            <div v-for="(item,index) in messageData" :key="index" class="text item" @click="viewMessage">
              {{item.title}}
            </div>
          </el-card>
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane :label="noticeName" name="second">
        <el-scrollbar style="height:300px">
          <el-card>
            <div v-for="(item,index) in noticeData" :key="index" class="text item" @click="viewNotice(item)">
              {{item.title}}
            </div>
          </el-card>
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>

    <div slot="reference">
      <el-badge :value="topCount">
        <i class="el-icon-bell"></i>
      </el-badge>
    </div>
  </el-popover>

  <!-- 公告详情 -->
  <el-dialog
    title="通知详情"
    append-to-body
    :visible.sync="noticeDetailFlowBox"
    :fullscreen="false"
    custom-class="detail_dialog"
  >
    <div class="detail_info">
      <div class="detail_title">{{noticeInfo.title}}</div>
      <div class="detail_time">时间：{{noticeInfo.createTime}}</div>
      <div class="detail_memo">{{noticeInfo.content}}</div>
    </div>
  </el-dialog>
  </div>
</template>

<script>

import {getNotifyCount,getNotifyList,updateNotifyStatus} from '@/api/base/index'
import {getNotice} from "@/api/desk/notice"

export default {
  name: "top-notice",
  data () {
    return {
      activeName: 'first',
      option: {
        props: {
          img: 'img',
          title: 'title',
          subtitle: 'subtitle',
          tag: 'tag',
          status: 'status'
        },
      },
      messageData: [],
      noticeData:[],
      noticeDetailFlowBox:false,

      messageName:'消息',
      noticeName:'通知',
      topCount:'',
      noticeInfo:[],

      visable:false,
    }
  },
  mounted() {
      this.$nextTick(() => {
        setInterval(this.getData, 30000);
      })
  },
  methods: {

    getData(){
      //获取数量
      getNotifyCount().then(res=>{
        let result = res.data.data
        let top_count = 0;
        result.map(item=>{
          top_count += item.value*1

          if(item.name === 'sjxi' && item.value*1 > 0){
            this.messageName = '消息('+item.value+')'
          }else{
            this.noticeName = '通知('+item.value+')'
          }
        })

        this.topCount = top_count > 0 ? top_count : ''
      })

      //获取数据列表
      getNotifyList().then(res=>{
        let result = res.data.data

        this.noticeData = result['tzxi']
        this.messageData = result['sjxi']
      })
    },

    //查看内容
    viewNotice(item){
      let id = item.busId
      //查看详情
      getNotice(id).then(res=>{
        this.noticeInfo = res.data.data
      })

      this.noticeDetailFlowBox = true

      //修改查看状态
      updateNotifyStatus(id).then(res=>{
        console.log("res:",res)
      })
    },

    viewMessage(){
      this.$router.push({
        path: this.$router.$avueRouter.getPath({
          name: '矛盾待办',
          src: '/ninebasic/dispute/myCommissionDispute'
        }),
        query: ''
      });

      this.visable = false
    },
  }
};
</script>

<style lang="scss" scoped>
  .el-tabs__active-bar{width:28px;}
  .text {
    font-size: 14px;
  }

  .item {
    padding: 8px 0;border-bottom:#eee 1px solid; cursor: pointer;
  }
  .item:hover{color:#409EFF;}

  .detail_info{width:90%;margin-left:5%;}
.detail_title{font-size:21px;font-weight:bold;width:100%;text-align:center;}
.detail_time{font-size:13px;color:#666;width:100%;text-align:center;border-bottom:#eee 1px solid;padding-top:10px;padding-bottom:10px;}
.detail_memo{padding:10px 10px;}
</style>
